<script setup lang="ts">
  import { defineProps, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { queryWorkbinToolInfo, queryWorkbinMatchInfo } from '@/api/les';

  const props = defineProps<{
    tableData: any;
  }>();
  // AO数据头
  const carColumns: any[] = [
    {
      title: '料车列表',
      align: 'left',
      headerCellStyle: { fontSize: 'large', fontWeight: 400 },
      children: [
        {
          title: '料车编码',
          dataIndex: 'carCode',
        },
        {
          title: '料车状态',
          dataIndex: 'status',
          slotName: 'isEmpty',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '配送时间',
          dataIndex: 'sendDate',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '托盘号',
          dataIndex: 'toolCode',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '任务状态',
          dataIndex: 'taskStatus',
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
      ],
    },
  ];
  const aoColumns: any[] = [
    {
      title: 'AO列表',
      align: 'left',
      headerCellStyle: { fontSize: 'large', fontWeight: 400 },
      children: [
        {
          title: 'AO',
          dataIndex: 'msTaskAoId',

          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
      ],
    },
  ];

  const materialColumns: any[] = [
    {
      title: '物料列表',
      align: 'left',
      headerCellStyle: { fontSize: 'large', fontWeight: 400 },
      children: [
        {
          title: '物料编码',
          dataIndex: 'itemCode',
          width: '180',
        },
        {
          title: '物料名称',
          dataIndex: 'itemName',
          width: '180',
        },
        {
          title: '物料数量',
          dataIndex: 'itemQty',
          width: '120',
        },
        {
          title: '合格证',
          dataIndex: 'checkQualiticationId',
          width: '180',
        },
        {
          title: '装配图号',
          dataIndex: 'repartAss',
          width: '180',
        },
        {
          title: '物料条码',
          dataIndex: 'barcode',
          width: '180',
        },
        {
          title: '机型代码',
          dataIndex: 'productCode',
          width: '180',
        },
        {
          title: '机型名称',
          dataIndex: 'productName',
          width: '180',
        },
        {
          title: '批次号',
          dataIndex: 'batchNo',
          width: '180',
        },
        {
          title: '开始批次',
          dataIndex: 'startPlaneNo',
          width: '180',
        },
        {
          title: '结束批次',
          dataIndex: 'endPlaneNo',
          width: '180',
        },
      ],
    },
  ];

  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.responseBody?.records || [];
      // localTableData.value = [];
      total.value = props.tableData?.responseBody?.total || 0;
      // total.value = 0;
    },
    { immediate: true }
  );

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 52);
  });

  // 获取AO列表
  const aoList = ref<any[]>([]);
  async function getAoTableData(record: any) {
    const data = await queryWorkbinToolInfo({ toolCode: record.toolCode });
    aoList.value = data.responseBody;
  }

  // 获取物料信息
  const materialList = ref<any[]>([]);
  async function getMaterialTableData(record: any) {
    const data = await queryWorkbinMatchInfo({ msTaskAoId: record.msTaskAoId });
    materialList.value = data.responseBody;
  }
</script>

<template>
  <a-row :gutter="8">
    <a-col :span="18">
      <div>
        <a-table
          :stripe="true"
          class="top-table"
          :pagination="false"
          :columns="carColumns"
          :data="localTableData"
          style="height: 250px"
          :scroll="{ y: 400 }"
          @row-click="getAoTableData"
        >
        </a-table>
        <div class="page-position">
          <a-pagination
            :total="total"
            :current="pageNum"
            :page-size="pageSize"
            show-total
            show-jumper
            show-page-size
            @change="change"
            @update:pageSize="changeSize"
          />
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <a-table
        :stripe="true"
        class="top-table"
        :pagination="false"
        :columns="aoColumns"
        :data="aoList"
        style="height: 250px"
        :scroll="{ y: 400 }"
        @row-click="getMaterialTableData"
      >
      </a-table>
    </a-col>
    <a-col :span="24" style="margin-top: 8px">
      <a-table
        :stripe="true"
        class="top-table"
        :pagination="false"
        :columns="materialColumns"
        :data="materialList"
        style="height: 250px"
        :scroll="{ y: 400 }"
      >
      </a-table>
    </a-col>
  </a-row>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
